<div id="div0" class="pull-left navbar-fixed-top">
    <ul>
        <li class="lis"><a href="#"><h2>1</h2><p>JAN</p></a></li>
        <li class="lis"><a href="#"><h2>2</h2><p>FER</p></a></li>
        <li class="lis"><a href="#"><h2>3</h2><p>MAR</p></a></li>
        <li class="lis"><a href="#"><h2>4</h2><p>APR</p></a></li>
        <li class="lis"><a href="#"><h2>5</h2><p>MAY</p></a></li>
        <li class="lis"><a href="#"><h2>6</h2><p>JUN</p></a></li>
        <li class="lis"><a href="#"><h2>7</h2><p>JUL</p></a></li>
        <li class="lis"><a href="#"><h2>8</h2><p>AUG</p></a></li>
        <li class="lis"><a href="#"><h2>9</h2><p>SEP</p></a></li>
        <li class="lis"><a href="#"><h2>10</h2><p>OCT</p></a></li>
        <li class="lis"><a href="#"><h2>11</h2><p>NOV</p></a></li>
        <li class="lis"><a href="#"><h2>12</h2><p>DEC</p></a></li>
    </ul>
    <div id="div1">
        <h2>1月诗句</h2>
        <p>正月晴和风气新，纷纷已有醉游人。（唐·白居易《早春持斋，答皇甫十见赠》）</p>
    </div>
</div>
<script>
    window.onload=function (){
        var arr=[
            '正月晴和风气新，纷纷已有醉游人。（唐·白居易《早春持斋，答皇甫十见赠》）',
            '新年都未有芳华，二月初惊见草芽。（唐·韩愈《春雪》）',
            '故人西辞黄鹤楼，烟花三月下扬州。（唐·李白《黄鹤楼送孟浩然之广陵》）',
            '人间四月芳菲尽，山寺桃花始盛开。（唐·白居易《大林寺桃花》）',
            '五月天山雪，无花只有寒。（唐·李白《塞下曲》）',
            '毕竟西湖六月中，风光不与四时同。（宋·杨万里《晓出净慈寺送林子方》）',
            '七月七日长生殿，夜半无人私语时。（唐·白居易《长恨歌》）',
            '八月秋高风怒号，卷我屋上三重茅。（唐·杜甫《茅屋为秋风所破歌》）',
            '可怜九月初三夜，露似真珠月似弓。（唐·白居易《暮江吟》）',
            '不知十月江寒上，陡觉三更布被轻。（清·查慎行《寒夜次潘岷原韵》）',
            '十一月中长至夜，三千里外远行人。（唐·白居易《冬至宿杨梅馆》）',
            '寒冬十二月，晨起践严霜。（汉·无名氏《别诗》）'
        ];
        //alert(arr[1]);
        var oDiv = document.getElementById('div0');
        var oLi = oDiv.getElementsByClassName('lis');
        //alert(oLi.length);
        var gDiv = document.getElementById('div1');
        for(var i = 0;i<oLi.length;i++){
            oLi[i].m=i;//alert(this.m);
            oLi[i].onmouseover=function (){
                for(var i = 0;i<oLi.length;i++){
                    //alert(this);
                    oLi[i].className="";
                }
                this.className="active";

                gDiv.innerHTML='<h2>'+(this.m+1)+'月诗句</h2><p>'+arr[this.m]+'</p>';
            }
        }
    }
</script>